<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
</head>
<style>
    .upload {
        text-align: left;
    }

     ::-webkit-scrollbar-thumb{
         background-color: #009688;
     }

    .upload img {
        cursor: pointer;
        margin-left: 150px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
</style>
<body>
<div class="layui-form timo-compile">
    <!--    <form th:action="@{/system/user/save}" enctype="multipart/form-data">-->
    <!--    <form>-->
    <div class="layui-form-item">
        <div class="upload">
            <img th:src="${user?.headImg == null ? '/images/default.png' : user?.headImg}" id="img">
            <input name="img" type="file" id="file" hidden="hidden">
            <input name="headImg" type="text" th:value="${user?.headImg}" hidden="hidden">
        </div>
    </div>
    <input type="hidden" name="id" th:if="${user}" th:value="${user.id}"/>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="username" placeholder="请输入用户名"
                   th:value="${user?.username}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="nickname" placeholder="请输入真实姓名"
                   th:value="${user?.nickname}">
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="password" name="password" placeholder="请输入用户密码"
                   th:value="${user?.password}">
        </div>
    </div>
    <div class="layui-form-item" th:if="!${user}">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="password" name="confirm" placeholder="再一次输入密码">
        </div>
    </div>
    <div class="layui-form-item" hidden>
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="salt" th:value="${user?.salt}">
        </div>
    </div>
    <!--        <div class="layui-form-item">
                <label class="layui-form-label required">所在部门</label>
                <div class="layui-input-inline">
                    <input class="layui-input select-tree" th:attr="data-url=@{/system/dept/list}, data-value=${user?.dept?.id}"
                           type="text" name="dept"  placeholder="请选择所在部门" th:value="${user?.dept?.title}">
                </div>
            </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label required">手机号</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="phone" placeholder="请输入手机号" th:value="${user?.phone}">
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">邮箱</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <input class="layui-input" type="text" name="email" placeholder="请输入邮箱" th:value="${user?.email}">-->
<!--        </div>-->
<!--    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号码</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="idcard" placeholder="请输入身份证号码" th:value="${user?.idcard}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">积分</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="pointsLeft" placeholder="请输入积分" th:value="${user?.pointsLeft}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择性别</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="1" title="男" checked>
            <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>
                <div>男</div>
            </div>
            <input type="radio" name="sex" value="2" title="女" th:checked="${user?.sex} eq 2">
            <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                <div>女</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" id="remark" class="layui-textarea" name="remark">[[${
                user?.remark}]]</textarea>
        </div>
    </div>
    <div class="layui-form-item timo-finally" style="    margin-left: 110px;margin-top: 0;border-top: 0">
        <button class="layui-btn" id="userSubmit"><i class="fa fa-check-circle"></i> 保存</button>
        <button id="close" class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
    </div>
    <!--    </form>-->
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript" th:src="@{/js/timoTree.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var affix;

    $('#file').change(function (obj) {
        //获取选中的文件
        var file = obj.target.files[0];
        if (file) {
            //文件格式验证
            if (/image\/jpeg+|png+/.test(file.type)) {
                affix = file;
                var fr = new FileReader();
                fr.onload = function () {
                    $("#img").attr("src", fr.result);
                };
                // 注意要先设置回调再读取文件
                fr.readAsDataURL(file);
            } else {
                layer.msg("图片格式不支持")
            }
        }
    })
    //点击按钮 弹出选择文件
    $('#img').click(function () {
        //打开文件选中框
        $('#file').click();
    })

    $('#userSubmit').click(function () {
        layer.load(2);
        var form = new FormData();
        form.append("img", affix)
        var id = $('input[name="id"]').val();
        if (id) {
            form.append("id", id)
        }
        form.append("username", $('input[name="username"]').val())
        form.append("nickname", $('input[name="nickname"]').val())
        form.append("password", $('input[name="password"]').val())
        form.append("salt", $('input[name="salt"]').val())
        form.append("confirm", $('input[name="confirm"]').val())
        form.append("phone", $('input[name="phone"]').val())
        form.append("email", $('input[name="email"]').val())
        form.append("idcard", $('input[name="idcard"]').val())
        form.append("pointsLeft", $('input[name="pointsLeft"]').val())
        form.append("sex", $('input[name="sex"]:checked').val())
        form.append("headImg", $('input[name="headImg"]').val())
        form.append("remark", document.getElementById('remark').value)
        $.ajax({
            url: '/system/user/save',
            method: "post",
            data: form,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            success: function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    layer.closeAll();
                    parent.location.reload();
                    parent.layer.close(window.parent.layerIndex);
                    // $("#close").click();
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        })
    })
</script>
</body>
</html>
